<template>
  <el-switch
    v-model="switchValue"
    active-color="#409EFF"
    inactive-color="#C0CCDA"
    :width="56"
    class="tn-inner-text-switch"
    v-bind="$props"
    @change="changeVal"
  />
</template>

<script>

import { Switch } from 'element-ui'

export default {
  name: 'TnInnerTextSwitch',
  model: {
    prop: 'value',
    event: 'changeModelVal'
  },
  props: {
    ...Switch.props
  },
  data() {
    return {
      switchValue: this.value
    }
  },
  watch: {
    value(val) {
      this.switchValue = val
    }
  },
  methods: {
    changeVal(val, self) {
      this.$emit('changeModelVal', val)
      this.$emit('change', val, self)
    }
  }
}
</script>

<style lang="scss">
.tn-inner-text-switch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
.tn-inner-text-switch .el-switch__label--left {
  z-index: 9;
  right: 0px;
  color: #409EFF;
}
.tn-inner-text-switch .el-switch__label--right {
  z-index: 9;
  left: 0px;
  color: #ffffff;
}
.tn-inner-text-switch .el-switch__label.is-active {
  display: block;
}

// .tn-inner-text-switch.el-switch .el-switch__core,
// .el-switch .el-switch__label {
//   width: 50px !important;
// }

</style>
